<template>
  <div>
    <!-- <h3>vueUse库的使用</h3> -->
    <el-tabs v-model="activeName">
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in comArr" :key="item.label">
        <component :is="item.name"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MyDemo from './components/MyDemo.vue'
import UseMouse from './components/UseMouse.vue'
import UseStorage from './components/UseStorage.vue'
import UseFullscreen from './components/UseFullscreen.vue'
import UseColorMode from './components/UseColorMode.vue'
import UseThrottleFn from './components/UseThrottleFn.vue'
import State from './components/State.vue'
import MyElements from './components/MyElements.vue'
import MyBrowser from './components/MyBrowser.vue'
import MyUtilities from './components/MyUtilities.vue'
import MyNetwork from './components/MyNetwork.vue'
import MyTime from './components/MyTime.vue'
import MySensors from './components/MySensors.vue'
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'vueUse',
  components: {
    MyDemo,
    UseMouse,
    UseStorage,
    UseFullscreen,
    UseColorMode,
    UseThrottleFn,
    State,
    MyElements,
    MyBrowser,
    MyUtilities,
    MyNetwork,
    MyTime,
    MySensors,
    MyComponent
  },
  data() {
    return {
      activeName: 'MyDemo',
      comArr: [
        {
          label: 'MyDemo',
          name: 'MyDemo'
        },
        {
          label: 'UseMouse',
          name: 'UseMouse'
        },
        {
          label: 'UseStorage',
          name: 'UseStorage'
        },
        {
          label: 'UseFullscreen',
          name: 'UseFullscreen'
        },
        {
          label: 'UseColorMode',
          name: 'UseColorMode'
        },
        {
          label: 'UseThrottleFn',
          name: 'UseThrottleFn'
        },
        {
          label: 'State',
          name: 'State'
        },
        {
          label: 'MyElements',
          name: 'MyElements'
        },
        {
          label: 'MyBrowser',
          name: 'MyBrowser'
        },
        {
          label: 'MyUtilities',
          name: 'MyUtilities'
        },
        {
          label: 'MyNetwork',
          name: 'MyNetwork'
        },
        {
          label: 'MyTime',
          name: 'MyTime'
        },
        {
          label: 'MySensors',
          name: 'MySensors'
        },
        {
          label: 'MyComponent',
          name: 'MyComponent'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped></style>
